import * as React from 'react';

export function Order({ number, children, isFirst = false }) {
  return (
    <div>
      <div className={`${isFirst ? 'number-block-first' : 'number-block'}`}>
        <div className="number">{number}</div>
        <span className="number-title">{children}</span>
      </div>
      <style jsx>{`
        .number-block {
          display: flex;
          margin-top: 16px;
        }
        .number-block-first {
          display: flex;
          margin-top: 0px;
        }
        .number {
          width: 22px;
          height: 22px;
          font-size: 15px;
          line-height: 22px;
          border-radius: 50%;
          text-align: center;
          background-color: var(--color-geekblue-1);
          color: var(--color-geekblue-9);
          font-weight: 600;
          position: relative;
          top: 4px;
        }
        .number-title {
          // font-weight: 600;
          font-size: 15px;
          margin-left: 12px;
          line-height: 22px;
        }
      `}</style>
    </div>
  );
}
